<template>
	<view>
		<!-- 轮播图 -->
		<u-swiper :list="bannerList" keyName="img" height='200' indicator circular indicatorMode='dot'
			indicatorActiveColor='#f66'></u-swiper>

		<!-- 宫格布局 -->
		<view class="gridBox">
			<u-grid :border="false" col='5'>
				<u-grid-item v-for="item in navList" :key="item.navid">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.imgurl" :size="36"></u-icon>
					<text class="grid-text">{{item.title}}</text>
				</u-grid-item>
			</u-grid>
			<u-toast ref="uToast" />
		</view>
		
		<!-- 商品列表 -->
		<u-cell-group>
			<u-cell v-for="item in proList" @click='goDetailClick(item.proid)' :key="item.proid" :title="item.proname">
				<u-avatar slot="icon" size='80' shape='square' :src="item.img1"></u-avatar>
			</u-cell>
		</u-cell-group>
			
		<!-- 回到顶部 -->
		<view class="backTop" @click="backTopClick" v-show="scrollTop > 300">
			<u-icon name="arrow-upward" :size="24"></u-icon>
		</view>
			
	</view>
</template>

<script>
	import {
		getBannerList,
		getNavList,
		getProList
	} from '../../api/home.js'
	export default {
		data() {
			return {
				bannerList: [],
				navList: [],
				proList: [],
				count: 2,
				scrollTop: 0
			}
		},
		onPageScroll({scrollTop}) {
			// 记录当前页面滚动距离
			this.scrollTop = scrollTop
		},
		onPullDownRefresh() {
			// 监听用户下拉刷新
			getProList().then(res => {
				this.proList = res.data
				this.count = 2
				// 关闭下拉加载的图标
				uni.stopPullDownRefresh()
			})
		},
		methods: {
			backTopClick(){
				// 回到顶部的点击事件
				// duration 动画过渡时间
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100
				})
			},
			goDetailClick(proid){
				console.log(proid);
				// 页面跳转到详情，且携带参数
				uni.navigateTo({
					url:'/pages/detail/detail?proid=' + proid,
					success(res) {
						res.eventChannel.emit('proid', {
							name: '旺旺',
							age: 38,
							sex: '女',
							proid
						})
					}
				})
			}
		},
		mounted() {
			// 获取轮播图数据
			getBannerList().then(res => {
				console.log(res);
				this.bannerList = res.data
			})

			// 获取宫格数据
			this.navList = getNavList()
			
			// 获取商品列表数据
			getProList().then(res => {
				this.proList = res.data
			})
		},
		onReachBottom() {
			// 上拉加载更多的方法
			getProList({
				count: this.count
			}).then(res => {
				if(res.data.length <= 0){
					// 没有更多数据了
					uni.showToast({
						title: '没有更多内容了...'
					})
				}else {
					this.proList = [...this.proList, ...res.data]
					this.count++
				}
			})
		}
	}
</script>

<style lang="scss">
.gridBox {
	padding: 10px;
	.grid-text {
		font-size: 14px;
	}
}
.backTop {
	position: fixed;
	bottom: 60px;
	right: 10px;
	background-color: white;
	border-radius: 50%;
	border: 1px solid #f66;
	width: 36px;
	height: 36px;
	padding-left: 5px;
	box-sizing: border-box;
	padding-top: 5px;
}
</style>